<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机</title>
    <!-- 引入样式-->
    <link href="../imgs/2.jpeg" type="image/x-icon" rel="icon">
    <link rel="stylesheet" href="../js/element-ui/index.css">
    <!-- 引入js-->
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/http.js"></script>
    <script src="../js/element-ui/index.js"></script>
    <style>
        body{
            background: #f2f6fc;
        }
        .my-p{
            background: #c2e7b0;
            border-radius: 5px;
            margin-top: 10px;
        }
        #div{
            margin-top: 100px;
            margin-left: 250px;
            width: 320px;
        }
    </style>
</head>
<body>
<div id="app">
    <br>
    <el-popover
            placement="top-start"
            title="提示"
            width="200"
            trigger="hover"
            content="点击随机按钮，随机显示一条书评。">
        <el-button type="primary" slot="reference" @click="getByRandom">随机</el-button>
    </el-popover>

    <div v-if="bookReview!=null" id="div">
        <p class="my-p">昵称:{{bookReview.nickName}}</p>
        <p class="my-p">书名:{{bookReview.bookName}}</p>
        <p class="my-p">评分:{{bookReview.score}}分</p>
        <p class="my-p">评价:{{bookReview.review}}</p>
        <p class="my-p">发布时间:{{bookReview.time}}</p>
    </div>
</div>

<script>
    let vue=new Vue({
        el:"#app",
        data:{
            bookReview:null,
        },
        created(){
            this.$message("点击随机按钮，随机显示一条书评。")
        },
        methods:{
            getByRandom(){
                http.get("/bookReview/getByRandom").then(res=>{
                    this.bookReview=res.data;
                    this.$message.success("随机抽取成功");
                })
            },
        }
    });
</script>
</body>
</html>